<template>
  <div class="">
	<!-- 引入菜单组件 -->
	<vNavlist />
	<!-- 教师数据 -->
	<div class="subject">
		<p class="title">各学科成绩数据{{this.$route.query.id}}</p>	
		<div id="myChart"></div>
	</div>
  </div>
</template>

<script>
import vNavlist from "@/components/vNavlist.vue"
export default {
	name: 'vSubject',
	mounted(){
		this.draImg()
	},
	components:{
		vNavlist
	},
	data () {
		return {
		}
	},
	methods:{
		draImg(){
			// 基于准备好的dom，初始化echarts实例
			let myChart = this.$echarts.init(document.getElementById("myChart"));
			console.log(myChart)
			// 绘制图表
			myChart.setOption({
				title: {
				        text: '各学科成绩数据',
				        subtext: '纯属虚构',
				        left: 'center'
				    },
				    tooltip: {
				        trigger: 'item',
				        formatter: '{a} <br/>{b} : {c} ({d}%)'
				    },
				    legend: {
				        left: 'center',
				        top: 'bottom',
				          data: [
				                    "语文",
				                    "数学",
				                    "英语",
				                    "物理",
				                    "化学",
				                    "生物",
				                    "地理",
				                    "政治"
				                  ]
				    },
				    toolbox: {
				        show: true,
				        feature: {
				            mark: {show: true},
				            dataView: {show: true, readOnly: false},
				            magicType: {
				                show: true,
				                type: ['pie', 'funnel']
				            },
				            restore: {show: true},
				            saveAsImage: {show: true}
				        }
				    },
				    series: [
				        {
				            name: '半径模式',
				            type: 'pie',
				            radius: [20, 110],
				            center: ['25%', '50%'],
				            roseType: 'radius',
				            label: {
				                show: false
				            },
				            emphasis: {
				                label: {
				                    show: true
				                }
				            },
				            data: [
									 { value: 10, name: "语文" },
									 { value: 5,  name: "数学" },
									 { value: 15, name: "英语" },
									 { value: 25, name: "物理" },
									 { value: 20, name: "化学" },
									 { value: 35, name: "生物" },
									 { value: 30, name: "地理" },
									 { value: 40, name: "政治" }
								   ]
				        },
				        {
				            name: '面积模式',
				            type: 'pie',
				            radius: [30, 110],
				            center: ['75%', '50%'],
				            roseType: 'area',
				            data: [
									 { value: 10, name: "语文" },
									 { value: 5,  name: "数学" },
									 { value: 15, name: "英语" },
									 { value: 25, name: "物理" },
									 { value: 20, name: "化学" },
									 { value: 35, name: "生物" },
									 { value: 30, name: "地理" },
									 { value: 40, name: "政治" }
								   ]
				        }
				    ]
			});
		}
	}
}
</script>;

<style>
	.subject{
		height: 500px;
		margin: 50px 10px;
		position: relative;
		background: #DDD;
	}
	.title{
		border-bottom: 4px solid white;
		line-height: 40px;
		font-weight: bold;
	}
	.subject #myChart{
	  position: absolute;
	  top: 40px;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  margin: auto;
	  width: 700px;
	  height: 400px;
	}
</style>
